<template>
  <a-spin :spinning="isLoading">
    <div class="container">
      <!-- 数据概况 -->
      <a-card class="overview" :bordered="false">
        <div class="card-title">
          <span>数据概况</span>
        </div>
        <div class="screen flex flex-x-center">
          <a-range-picker v-model="dateValue" format="YYYY-MM-DD" />
          <!-- 快捷选项 -->
          <div class="shortcut">
            <div class="shortcut-days">
              <a href="javascript:void(0);" @click="onFastDate(7)">7天</a>
              <a href="javascript:void(0);" @click="onFastDate(30)">30天</a>
              <a href="javascript:void(0);" @click="onFastDate(0)">清空</a>
            </div>
          </div>
        </div>
        <a-row class="mt-20" :gutter="32">
          <a-col class :span="8">
            <div class="item flex">
              <div class="col-left">
                <div class="icon-body flex flex-x-center flex-y-center">
                  <a-icon :component="Icons.statistics.order1" />
                </div>
              </div>
              <div class="col-right">
                <p class="name">订单佣金（平台任一商品下单的百分之20佣金）</p>
                <p class="value fnt12">总金额：{{ data.overview.orderTotalPrice }}</p>
                <p class="value fnt12">佣金：{{ data.overview.orderTotalPrice * 20 / 100 }}元</p>
              </div>
            </div>
          </a-col>
          <a-col class :span="8">
            <div class="item flex">
              <div class="col-left">
                <div class="icon-body flex flex-x-center flex-y-center">
                  <a-icon :component="Icons.statistics.fenxiao1" />
                </div>
              </div>
              <div class="col-right">
                <p class="name">分销-团长佣金（团长邀请下级购买后分配的佣金）</p>
                <p class="value">{{ data.overview.distributionCommission }}元</p>
              </div>
            </div>
          </a-col>
          <a-col class :span="8">
            <div class="item flex">
              <div class="col-left">
                <div class="icon-body flex flex-x-center flex-y-center">
                  <a-icon :component="Icons.statistics.pingtuan" />
                </div>
              </div>
              <div class="col-right">
                <p class="name">拼团-团长佣金（团长发起拼团成功获得的佣金）</p>
                <p class="value">{{ data.overview.groupLeadersCommission }}元</p>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row class="mt-20" :gutter="32">
          <a-col class :span="8">
            <div class="item flex">
              <div class="col-left">
                <div class="icon-body flex flex-x-center flex-y-center">
                  <a-icon :component="Icons.statistics.cwtz" />
                </div>
              </div>
              <div class="col-right">
                <p class="name">分销-团长总数量</p>
                <p class="value">{{ data.overview.distributionNumber }}人</p>
              </div>
            </div>
          </a-col>
          <a-col class :span="8">
            <div class="item flex">
              <div class="col-left">
                <div class="icon-body flex flex-x-center flex-y-center">
                  <a-icon :component="Icons.statistics.stuanshuliang" />
                </div>
              </div>
              <div class="col-right">
                <p class="name">拼团成功-团数量</p>
                <p class="value">{{ data.overview.groupLeadersNumber }}个</p>
              </div>
            </div>
          </a-col>
          <a-col class :span="8">
            <div class="item flex">
              <div class="col-left">
                <div class="icon-body flex flex-x-center flex-y-center">
                  <a-icon :component="Icons.statistics.fxhb" />
                </div>
              </div>
              <div class="col-right">
                <p class="name">海报总分享次数</p>
                <p class="value">{{ data.overview.posterSharingTimes }}人</p>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>

      <!-- 近七日交易走势 -->
      <a-card class="trade-trend mt-20" :bordered="false">
        <div class="card-title">
          <span>近七日交易走势</span>
        </div>
        <div class="echarts-body">
          <div id="main" style="width: 100%; height: 400px;"></div>
        </div>
      </a-card>
    </div>
  </a-spin>
</template>

<script>
  import echarts from 'echarts'
  import 'echarts/theme/fresh-cut'
  import * as Api from '@/api/statistics/data'
  import * as Icons from '../statistics/modules/icon'
  import { getDateByDay } from '@/utils/util'
  import moment from 'moment'

  // 商品销售榜 (table字段)
  const goodsRankingColumns = [
    {
      title: '排名',
      dataIndex: 'index',
      align: 'center',
      scopedSlots: { customRender: 'index' }
    },
    {
      title: '商品名称',
      dataIndex: 'goods_name',
      scopedSlots: { customRender: 'goods_name' }
    },
    {
      title: '销量 (件)',
      align: 'center',
      dataIndex: 'total_sales_num'
    },
    {
      title: '销售额 (元)',
      align: 'center',
      dataIndex: 'sales_volume'
    }
  ]

  // 用户消费榜 (table字段)
  const userRankingColumns = [
    {
      title: '排名',
      dataIndex: 'index',
      align: 'center',
      scopedSlots: { customRender: 'index' }
    },
    {
      title: '会员昵称',
      dataIndex: 'nick_name',
      scopedSlots: { customRender: 'nick_name' }
    },
    {
      title: '实际消费金额 (元)',
      align: 'center',
      dataIndex: 'expend_money'
    }
  ]

  // 默认数据
  const data = {
    overview: {
      userTotal: '0',
      consumeUsers: '0',
      orderTotal: '0',
      orderTotalPrice: '0.00',
      goodsTotal: '0',
      rechargeTotalMoney: '0'
    },
    tradeTrend: {
      date: [],
      orderTotal: [],
      orderTotalPrice: []
    },
    goodsRanking: [],
    userExpendRanking: []
  }

  export default {
    name: 'Index',
    data () {
      return {
        Icons,
        // 正在提交
        isLoading: false,
        // 页面数据
        data,
        // 日期筛选
        dateValue: [],
        // 排行榜字段
        goodsRankingColumns,
        userRankingColumns
      }
    },
    created () {
      // 获取页面数据
      this.getData()
    },
    methods: {

      // 监听事件：日期选择快捷导航
      onFastDate: function (days) {
        // 清空日期
        if (days === 0) {
          this.dateValue = []
        } else {
          this.dateValue = [moment(getDateByDay(-days)), moment(getDateByDay(0))]
        }
        // 获取数据概况
        this.getSurvey()
      },

      // 获取数据概况
      getSurvey () {
        this.isLoading = true
        const { dateValue } = this
        const data = { startDate: null, endDate: null }
        if (dateValue.length) {
          data.startDate = dateValue[0].format('YYYY-MM-DD')
          data.endDate = dateValue[1].format('YYYY-MM-DD')
        }
        Api.survey(data)
          .then(result => {
            this.data.overview = result.data
          })
          .finally(() => {
            this.isLoading = false
          })
      },

      // 获取页面数据
      getData () {
        this.isLoading = true
        Api.data()
          .then(result => {
            this.data = result.data.data
            // 渲染走势图
            this.$nextTick(() => {
              this.myEcharts()
            })
          })
          .finally(() => {
            this.isLoading = false
          })
      },

      // 渲染走势图
      myEcharts () {
        const { data } = this
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('main'), 'fresh-cut')

        // 指定图表的配置项和数据
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['成交量', '成交额']
          },
          toolbox: {
            show: true,
            showTitle: false,
            feature: {
              mark: { show: true },
              magicType: { show: true, type: ['line', 'bar'] }
            }
          },
          calculable: true,
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.tradeTrend.date
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '成交额',
              type: 'line',
              data: data.tradeTrend.orderTotalPrice
            },
            {
              name: '成交量',
              type: 'line',
              data: data.tradeTrend.orderTotal
            }
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      }
    }
  }
</script>
<style lang="less" scoped>
  .fnt12 {
    font-size: 14px !important;
    font-weight: bold;
  }
  .card-title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  // 实时概况
  .overview {
    a {
      color: unset;

      &:hover {
        color: #1890ff;
      }
    }

    .screen {
      margin-top: -22px;
      margin-bottom: 30px;
      text-align: center;
      .shortcut-days {
        margin-left: 10px;
        line-height: 32px;
        a {
          margin: 0 3px;
        }
      }
    }

    .item {
      padding: 13px 20px;
    }

    .col-left {
      color: #66aaff;
      font-size: 28px;
      margin-right: 35px;
      &.small {
        font-size: 26px;
      }

      .icon-body {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background-color: #eff6ff;
      }
    }

    .col-right {
      .name {
        font-size: 14px;
        color: #666;
      }

      .value {
        color: #000;
        font-size: 24px;
      }

      .yesterday {
        display: none;
        font-size: 12px;
        color: #999;
      }
    }
  }

  .ranking-img {
    text-align: center;
  }
</style>
